<template>
    <div class="login">
      <div class="top">
        <div class="top_in">
          <i class="logo"></i>
          <ul class="in_right">
            <li><router-link to="/">首页</router-link></li>
            <li><a href="#">多平台下载</a></li>
          </ul>
        </div>
      </div>
      <!--内容区-->
        <div class="content">
          <form class="left">
           <h1 style="font-size: 20px">用户名登录</h1>
            <el-input class="input" placeholder="账号"
              v-model="input1"
              clearable>
            </el-input>
            <el-input class="input"  placeholder="密码" v-model="input2" show-password></el-input>
            <div class="row">
            <label class="check"><input type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;自动登录</label>
            <a href="#" class="login_a">忘记密码?</a>
            </div>
            <div class="login_button">
              <a href="#"> <el-button type="primary" style="background: #298dff;width:100px;border-radius: 1px" @click="login">登录</el-button></a>
              <router-link to="/reg/stepone"> <el-button style="border: #298dff solid 1px; border-radius: 1px ;width:100px;color:#298dff">注册</el-button></router-link>
            </div>
          </form>
          <div class="right">
            <h1 style="font-size: 20px">其他账号登录</h1>
            <div class="qq">
              <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-qq" ></use>
              </svg>
              使用qq账号登录&nbsp;&nbsp;</div>
            <div class="weixin">
              <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-weixin"></use>
              </svg>
              使用微信账号登录</div>
            <div class="weibo">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weibo"></use>
              </svg>
              使用微博账号登录</div>
          </div>
        </div>
    </div>
</template>

<script>
  import {mapMutations} from 'vuex'
    export default {
        name: "login",
      data(){
          return{
          input1:'',
            input2:'',
          }
      },
      methods:{
          ...mapMutations(['setUser']),
          login:function () {
            var _this=this;
             this.$axios.post('/user/login', {
                 username:this.input1,
               password:this.input2,
            })
              .then(function (response) {
                if(response.data.code==200){
                    var _success=this;
                  // _this.getid()
                    console.log(response)
                    //将用户id存入sessionStorage
                    let user={
                     userid:response.data.data.userId,
                        username:_this.input1,
                    };
                    //将用户名存入vuex
                    _this.setUser(user);
                    console.log(_this.$store.state)
                  _this.$router.push("/web/newest");
                }
               else{
                   _this.open();
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          getid:function () {
            this.$axios.get('/user/sessionUser')
              .then(function (response) {
                console.log(response)
              })
              .catch(function (error) {
                console.log(error);
              });
    },
          open() {
              this.$alert('请重新输入', '账户名与密码不符', {
                  confirmButtonText: '确定',
                  callback: action => {
                      this.input1="",
                          this.input2=""
                  }
              });
          }
      }
    }
</script>

<style scoped>
.top{
  width: 100%;
  height: 50px;
  background: #398dee;
  position: fixed;
  left: 0;
  top: 0;
}
.top_in{
  width: 1200px;
  height: 100%;
  margin: 0 auto;

}
.logo{
  position: relative;
  top:10px;
  display: inline-block;
  width: 143px;
  height: 27px;
  background: url("../assets/sprite-e2e8774953.svg") 0 0 no-repeat;
  float: left;
  margin-right: 50px;
}
  .in_right{
   position: relative;
    float: right;

  }
.in_right li{
  float: left;
  line-height: 12px;
  width: 60px;
  height: 12px;
  margin-top: 20px;
  margin-right: 16px;
}
.in_right li a{
  color: white;
}

.in_right li:first-child{
  border-right: white 1px solid;
}
/*内容区*/
.content{
  width: 900px;
  height: 410px;
  margin: 130px auto;
  border: 1px solid #f1f2f2;
  box-shadow: 0px 0px 18px 0px rgba(57,141,238,0.12);
  position: relative;

}
  .left{
    width: 430px;
    height: 377px;
    position: absolute;
    padding: 50px 50px;
    box-sizing: border-box;
  }
.left .input{
  margin-top: 40px;
}
.right{
width: 428px;
  height: 407px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 50px 50px;
  box-sizing: border-box;
  border-left: rgba(214,214,214,0.5) 1px solid;
}
  .row{
    background: white;
    height: 20px;
    margin-top: 30px;
    user-select:none;
    cursor: default;
  }
  .check{
    position: relative;
    float: left;

  }
.check input{
  position: absolute;
  left: 0;
  top: 2.5px;
  cursor: pointer;
}
.login_a{
  position: relative;
  float: right;
}
  .login_button{
    margin-top: 20px;
  }
.login_button a:first-child{
  margin-left: 30px;
  position: relative;
  float: left;
}
.login_button a:last-child{
  float: right;
  position: relative;
  margin-right: 30px;
}
.right h1{
  margin-bottom: 40px;

}
.right div{
    height: 40px;
    border: 1px solid #d6d6d6;
    margin-bottom: 30px;
    border-radius: 4px;
    font-size: 15px;
  line-height: 40px;
  cursor: pointer;
  color: #9bc1f1;
  }

.right svg{
  font-size: 30px;
  position: relative;
  top: 5px;
  background: #FFFFFF;
  margin-right: 10px;
}

</style>
